<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/frame/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/frame/css/admin.css">
    <link rel="stylesheet" type="text/css" href="${base}/wxBackstage/icon/iconfont.css"/>
    <script>
        var base =  "${base}";
    </script>
    <link rel="stylesheet" href="${base}/frame/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="${base}/frame/fontawesome-free-5.11.2-web/css/all.css" rel="stylesheet">
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <style>
        body {
            background: url(${base}/backstage/images/bei.jpg);
            background-size: 100% 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-fluid" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">收入统计</div>
                        <div class="layui-card-body">
                            <div id="echar" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                <div carousel-item id="abc">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                    <#--                                    <div></div>-->
                                    <#--                                    <div></div>-->
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">支出统计</div>
                        <div class="layui-card-body">
                            <div id="echar1" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                <div carousel-item id="as">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                    <#--                                    <div></div>-->
                                    <#--                                    <div></div>-->
                                </div>
                            </div>

                        </div>
                    </div>


                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
                            <ul class="layui-tab-title">
                                <li class="layui-this">今日热搜</li>
                                <li>今日热帖</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <table id="LAY-index-topSearch"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table id="LAY-index-topCard"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-col-md4" >
            <div class="layui-card">
                <div class="layui-card-header">点餐动态</div>
                <div class="layui-card-body" id="dian">
                    <ul class="layui-timeline" id="dynamic" style="height:1300px;overflow-y:scroll" >


                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script src="${base}/backstage/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '${base}/frame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console']);
</script>


<script src="${base}/frame/layuiadmin/lib/extend/echarts.js"></script>
<script>
    var admin;
    var carousel;
    var $;
    layui.use(['table', 'util', 'carousel', 'element', 'admin','laydate'], function () {
        carousel = layui.carousel;
        var element = layui.element;
        var laydate = layui.laydate;
        admin = layui.admin;
        $ = layui.$;


        var echar= carousel.render({
            elem: "#echar"
            ,width: '100%'
            ,autoplay: false
            ,indicator:"inside"
            ,anim: 'fade'
        });
        var echar1= carousel.render({
            elem: "#echar1"
            ,width: '100%'
            ,autoplay: false
            ,indicator:"inside"
            ,anim: 'fade'
        });

        abc();
        as();

    });




</script>
<script>
    function abc() {
        var echartsApp = [], options = [
            {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['', '']
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ["2020-01","2020-02","2020-03","2020-04","2020-05","2020-06","2020-07","2020-08","2020-09","2020-10","2020-11","2020-12"]
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '收入统计',
                    type: 'line',
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0a94e8',
                            areaStyle: {
                                type: 'default',
                            }
                        }
                    },
                    data: ["100","250","30","90","300","340","390","310","350","400","30","300"]
                }
                    // {
                    //     name: '支出统计',
                    //     type: 'line',
                    //     smooth: true,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#CC6600',
                    //             areaStyle: {
                    //                 type: 'default',
                    //             }
                    //         }
                    //     },
                    //     data: ["130","900","300","1000","310","550","800","350","380","900","304","800"]
                    // }
                ]
            }
        ]
            , elemDataView = $('#abc').children('div')
            , renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            //window.onresize = echartsApp[index].resize;
            admin.resize(function () {
                echartsApp[index].resize();
            });
        };
        //没找到DOM，终止执行
        if (!elemDataView[0]) return;
        renderDataView(0);
        //监听数据概览轮播
        var carouselIndex = 0;
        carousel.on('change(abc)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });
    }
    function as() {
        var echartsApp = [], options = [
            {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['', '']
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ["2020-01","2020-02","2020-03","2020-04","2020-05","2020-06","2020-07","2020-08","2020-09","2020-10","2020-11","2020-12"]
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '支出统计',
                    type: 'line',
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#9932CC',
                            areaStyle: {
                                type: 'default',
                            }
                        }
                    },
                    data: ["100","250","30","90","300","340","390","310","350","400","30","300"]
                }
                //     {
                //         name: '支出统计',
                //         type: 'line',
                //         smooth: true,
                //         itemStyle: {
                //             normal: {
                //                 color: '#9932CC',
                //                 areaStyle: {
                //                     type: 'default',
                //                 }
                //             }
                //         },
                //         data: ["130","900","300","1000","310","550","800","350","380","900","304","800"]
                //     }
                ]
            }
        ]
            , elemDataView = $('#as').children('div')
            , renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            //window.onresize = echartsApp[index].resize;
            admin.resize(function () {
                echartsApp[index].resize();
            });
        };
        //没找到DOM，终止执行
        if (!elemDataView[0]) return;
        renderDataView(0);
        //监听数据概览轮播
        var carouselIndex = 0;
        carousel.on('change(as)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });
    }


</script>
<script>

    window.setInterval("sweepOrder()",1000);

        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:80/websocket/"+new Date().getTime());
        } else {
            layer.msg("当前浏览器不支持的消息通道")
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            layer.msg("消息通道发生错误")
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            sweepOrder();
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {


        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            layer.msg("消息通道已关闭")
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }



    function sweepOrder() {

        $.ajax({
            type: "get", //提交方式
            data: {"userId":'${user.id}'},
            url: "${base}/QRCode/selectSweepOrder",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){


                    $("#dynamic").html("")
                    for (let i = 0; i < data.data.length; i++) {
                        $("#dynamic").append(
                            '<li class="layui-timeline-item" >'+
                            '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>'+
                            '<div class="layui-timeline-content layui-text">'+
                            '<h3 class="layui-timeline-title">'+data.data[i].time+'</h3>'+
                            '<p>'+data.data[i].tableNumber+'点了'+data.data[i].name+'1份('+data.data[i].weight+')</p>'+
                            '<p style="color: red">备注:'+data.data[i].remarks+'</p>'+
                            '</div>'+
                            '</li>'
                        )
                    }
                }
            }
        });
    }
</script>
</html>